<script setup>
import router from '@/router';

//点击标签跳转规则
const changePage = (tab)=>{
    console.log(tab)
    switch(tab) {  
    case '0':  
        router.push('/main/planeTrain');
        break;  
    case '1':  
        router.push('/main/planeExperince');
        break;  
    case '2':  
        router.push('/main/planeSkydiving');
        break;
    case '3':  
        router.push('/main/planeCharter');
    break;
          
}
}
</script>

<template>
 <div class="PlaneExperince">
 <!-- 宣传图 -->
 <img src="~@/assets/banner-planeTrain.jpg" alt="">
        <el-tabs model-value="1" @tab-change="changePage" type="border-card">
            <el-tab-pane label="飞行培训"></el-tab-pane>
            <el-tab-pane label="飞行体验">
                <el-container class="content part1">
                    <el-aside width="45%">
                        <p>探索蓝天，感受自由，体验飞行项目将带您领略前所未有的飞行乐趣！在这里，您将有机会亲身感受飞行的魅力，挑战自我，成就一段难忘的旅程。</p>
                        <p>项目配备经验丰富的飞行教练，为您提供一对一的专业指导，讲解飞行操作技巧，让您对飞行有更深入的了解，确保您在体验过程中能够很好地享受飞行的乐趣。</p>
                        <p>快来参加体验飞行项目，让我们一起挑战蓝天，追逐梦想，开启一段精彩的飞行之旅吧！</p>
                        <img src="~@/assets/PlaneExperince.jpg" alt="">
                    </el-aside>
                    <el-main>
                        <img class="content-pic" src="~@/assets/server-introduction.jpg" alt="">
                        <el-button class="btnOrder" color="#cc0000" :dark="isDark" plain>点击预约飞行体验</el-button>
                    </el-main>
                </el-container>
            </el-tab-pane>
            <el-tab-pane label="跳伞飞行">Role</el-tab-pane>
            <el-tab-pane label="包机飞行">Task</el-tab-pane>
        </el-tabs>
 </div>
</template>

<style lang="less">
.PlaneExperince{

    margin: 0 auto;

    img {
        width: 100%;
        height: 700px;
    }

    .el-tabs {
        width: 100%;
        margin: 0;
        border: none;

        .el-container {
            width: 100%;
            height: 550px;
            padding: 30px;
            padding-bottom: 0;
            margin-bottom: 65px;
        }

        .content-pic {
            width: 100%;
            height: 100%;
            vertical-align: middle;
        }

        .el-tabs__header {
            background-color: #333;

        }

        .el-tabs__item {
            height: 55px;
            line-height: 55px;
            font-size: 16px;
        }

        /* 选项卡选中时样式 */
        .el-tabs__item.is-active {
            color: #fff;
            background-color: #cc0000;
            height: 50px;
            border: 2px solid #cc0000;
        }

        .el-main{
            margin-left: 70px;
        }

        .el-aside {
            padding-top: 20px;
            padding-right: 30px;
            p {
                text-indent: 2em;
                font-size: 18px;
                margin-bottom: 25px;
            }
            img{
                width: 600px;
                height: 250px;
            }
        }

        .btnOrder{
            font-size: 30px;
            margin-left: 60px;
            width: 550px;
            height: 70px;
        }

        .content:hover .el-aside h1 {
            color: #cc0000;
            /* 鼠标悬停时的颜色 */
        }
    }
}

</style>